<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梭哈游戏</title>
    <!--引入css 需要用这个标签-->
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
    <script src="js/web3.js"></script>
    <!--核心js 文件.-->
    <script src="jquery/jquery.js"></script>
    <script src="bootstrap/dist/js/bootstrap.js"></script>
    <style>
            *{
                 margin: 0;
                 padding: 0;
                 list-style: none;
            }
            .layout{
                   width: 80%;
                   margin: 40px auto;
            }
            .area_showhand{
                  border: 1px solid #ccc;
                  width: 90%;
                  margin: 20px auto;
                  height: 200px;
                  border-radius: 5px;
            }
			.first_address , .second_address{
				 width: 90%;
				 padding-left: 50px;
			}
            .area_showhand ul{

            }
            .area_showhand ul li{
                  width: 20%;
                  float: left;
            }
            .area_showhand ul li a{
                  display: block;
                  width: 60%;
                  margin: 10px auto;
            }
            .area_showhand ul li a img{
                  width: 100%;
				  border: 1px solid #ccc;
				  height:180px;
            }
            .weiclass{
                  width: 100px;
                  display: inline-block;
            }
    </style>
    <script>
		 //add web3 call here!
         //页面自动加载
         $(function(){
			 //1. 构造web3对象
			 var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
			 web3.eth.getAccounts(function(error, result) {
				 console.log(result);
			 })
			 //2. 构造合约实例
			 var contractAddr = "0x5c2f64bc9aac7c859d2f0c01dc169a867c496630";
			 var abi = [
				 {
					 "constant": false,
					 "inputs": [],
					 "name": "bringIn",
					 "outputs": [],
					 "payable": true,
					 "stateMutability": "payable",
					 "type": "function"
				 },
				 {
					 "constant": false,
					 "inputs": [],
					 "name": "withDraw",
					 "outputs": [],
					 "payable": true,
					 "stateMutability": "payable",
					 "type": "function"
				 },
				 {
					 "constant": false,
					 "inputs": [],
					 "name": "bet",
					 "outputs": [],
					 "payable": true,
					 "stateMutability": "payable",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [
						 {
							 "name": "",
							 "type": "address"
						 }
					 ],
					 "name": "isPlayerActioned",
					 "outputs": [
						 {
							 "name": "",
							 "type": "bool"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [],
					 "name": "round",
					 "outputs": [
						 {
							 "name": "",
							 "type": "uint8"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [],
					 "name": "getPocket",
					 "outputs": [
						 {
							 "name": "",
							 "type": "uint8"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [
						 {
							 "name": "",
							 "type": "address"
						 }
					 ],
					 "name": "roundBalance",
					 "outputs": [
						 {
							 "name": "",
							 "type": "uint256"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [],
					 "name": "minimalBet",
					 "outputs": [
						 {
							 "name": "",
							 "type": "uint256"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [
						 {
							 "name": "",
							 "type": "address"
						 }
					 ],
					 "name": "totalBalance",
					 "outputs": [
						 {
							 "name": "",
							 "type": "uint256"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [],
					 "name": "activePlayer",
					 "outputs": [
						 {
							 "name": "",
							 "type": "address"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [],
					 "name": "hostPlayer",
					 "outputs": [
						 {
							 "name": "",
							 "type": "address"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": false,
					 "inputs": [],
					 "name": "pass",
					 "outputs": [],
					 "payable": false,
					 "stateMutability": "nonpayable",
					 "type": "function"
				 },
				 {
					 "constant": false,
					 "inputs": [],
					 "name": "join",
					 "outputs": [],
					 "payable": false,
					 "stateMutability": "nonpayable",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [
						 {
							 "name": "pos",
							 "type": "uint8"
						 }
					 ],
					 "name": "getPlayerCard",
					 "outputs": [
						 {
							 "name": "host",
							 "type": "uint8"
						 },
						 {
							 "name": "guest",
							 "type": "uint8"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [],
					 "name": "winner",
					 "outputs": [
						 {
							 "name": "",
							 "type": "address"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [],
					 "name": "guestPlayer",
					 "outputs": [
						 {
							 "name": "",
							 "type": "address"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "constant": false,
					 "inputs": [],
					 "name": "fold",
					 "outputs": [],
					 "payable": false,
					 "stateMutability": "nonpayable",
					 "type": "function"
				 },
				 {
					 "constant": true,
					 "inputs": [],
					 "name": "bringInBet",
					 "outputs": [
						 {
							 "name": "",
							 "type": "uint256"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "view",
					 "type": "function"
				 },
				 {
					 "inputs": [
						 {
							 "name": "_cto",
							 "type": "address"
						 }
					 ],
					 "payable": false,
					 "stateMutability": "nonpayable",
					 "type": "constructor"
				 },
				 {
					 "anonymous": false,
					 "inputs": [
						 {
							 "indexed": false,
							 "name": "player",
							 "type": "address"
						 },
						 {
							 "indexed": false,
							 "name": "card",
							 "type": "uint8"
						 }
					 ],
					 "name": "onCardDeal",
					 "type": "event"
				 },
				 {
					 "anonymous": false,
					 "inputs": [],
					 "name": "onGameCreated",
					 "type": "event"
				 },
				 {
					 "anonymous": false,
					 "inputs": [
						 {
							 "indexed": false,
							 "name": "player",
							 "type": "address"
						 }
					 ],
					 "name": "onPlayerJoined",
					 "type": "event"
				 }
			 ];
			 var showhand = new web3.eth.Contract(abi, contractAddr);
			 console.log(showhand);


			//3. 加入游戏：获取账户地址，调用join方法
			 //弹出加入游戏对话框
			 $('#myModal').modal();
			 var acctAddr;
			 $('.joinGame').on("click", function() {

				 acctAddr = $('#addressId').val();
				 console.log(acctAddr);
				 //调用join方法
				 showhand.methods.join().send({
					 from: acctAddr,
					 gas: 300000
				 }, function(error, result){
					 if (!error) {
						 alert("加入成功");
						 $('.close_win').click();
					 }
				 })
			 });

			 //4. 下底注：调用bringIn方法，默认押注金额为100wei
			 $('.BringIn').on("click", function() {

				 showhand.methods.bringIn().send({
					 from: acctAddr,
					 value: 100,
					 gas: 300000
				 }, function(error, result){
					 if (!error) {
						 alert("下底注成功");
					 }
				 })
			 });

			 //5. 查看明牌：根据点击位置现实对应玩家的牌，底牌不可显示
			 function showMingPai(num) {

				 //页面中定义的手牌序号从1开始，合约中定义的序号从0开始
				 showhand.methods.getPlayerCard(num-1).call(function(error, result) {
					 if (error) {
						 console.log(result);
						 return;
					 }

					 var host = result.host;
					 var guest = result.guest;

					 //页面标签'first'表示guest的手牌
					 var expre = ".first ul li:nth-child("+num+") img";
					 $(expre).attr("src", "images/"+guest+".png");
					 $(expre).attr("title",guest);

					 expre = ".second ul li:nth-child("+num+") img";
					 $(expre).attr("src", "images/"+host+".png");
					 $(expre).attr("title",host);
				 });
			 };

			 //得到庄家账户，以便决定如何显示哪一方的底牌
			 var hostAddr;
			 function getHostPlayer() {

				 showhand.methods.hostPlayer().call(function(error, result) {

					 if (!error) {
						 hostAddr = result;
					 }
				 });
			 };

			 //显示自己的底牌，尽管合约中getPocket方法没有参数，但方法体中调用了msg.sender, 因此必须把当前账户传递过去
			 function showDiPai() {
				 getHostPlayer();
				 showhand.methods.getPocket().call({
					 from: acctAddr
				 }, function(error, result){
					 var card = result;

					 hostAddr = hostAddr.toLowerCase();
					 acctAddr = acctAddr.toLowerCase();

					 if (hostAddr == acctAddr) {
						 expre = ".second ul li:nth-child("+1+") img";
						 $(expre).attr("src", "images/"+card+".png");
						 $(expre).attr("title",card);
					 } else {
						 var expre = ".first ul li:nth-child("+1+") img";
						 $(expre).attr("src", "images/"+card+".png");
						 $(expre).attr("title",card);
					 }
				 });
			 }

			 //调用上述函数，并显示明牌
			 $(".second ul li").on("click", function() {
				 var num = $(this).index();
				 console.log(num);
				 if (num > 0) {
					 showMingPai(num+1);
				 }
				 else if (0 == num) {
					 showDiPai();
				 }
			 });

			 //下注
			 $(".Bet").on("click", function() {
				 //获取下注金额
				 var amount = $(".getWei").val();
				 console.log("bet:", amount);
				 showhand.methods.bet().send({
					 from: acctAddr,
					 value: amount,
					 gas: 300000
				 }, function(error, result) {
					 if (!error) {
						 alert("下注成功");
					 }
				 });
			 });

			 //过牌
			 $(".pass").on("click", function() {
				 showhand.methods.pass().send({
					 from: acctAddr,
					 gas: 300000
				 }, function(error, result) {
					 if (!error) {
						 alert("您已过牌，请等待对方玩家说话");
					 }
				 });
			 });

			 //弃牌
			 $(".fold").on("click", function() {
				 //风险提示
				 if (window.confirm('您确定要弃牌吗？')) {
					 showhand.methods.fold().send({
						 from: acctAddr,
						 gas: 300000
					 }, function(error, result) {
						 if (!error) {
							 alert("您已弃牌，对方玩家获胜");
						 }
					 });
				 }
			 });

			 //显示本轮的押注金额
			 $(".getBalance").on("click", function() {

				 showhand.methods.roundBalance(acctAddr).call(function(error, result) {
					 if (error) {
						 console.log("操作失败，"+result);
						 return;
					 }

					 var roundBalance = result;
					 alert("您本轮的押注金额为: " + roundBalance + " wei");
				 });

			 });

			 //查看"当前说话的玩家"
			 $(".getActivePlayer").on("click", function() {

				 showhand.methods.activePlayer().call(function(error, result) {
					 if (error) {
						 console.log("操作失败，"+result);
						 return;
					 }

					 var activePlayer = result;
					 var prompt = "";
					 if (activePlayer.toLowerCase() == acctAddr.toLowerCase()) {
						 prompt = "请您说话";
					 }
					 else {
						 prompt = "请等待对手玩家说话";
					 }

					 alert("当前说话玩家为: " + activePlayer + ", " + prompt);
				 });

			 });


		 });
	</script>
</head>
<body>
<!--弹出窗口部分-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">是否加入游戏</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="addressId">账户地址</label>
                    <input type="email" class="form-control" id="addressId" placeholder="请输入账户地址">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="close_win btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="joinGame btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="layout">
        <div class="first_address">
			<span>guestPlayer:</span>
			<span></span>
		</div>
        <div class="first area_showhand">
            <ul>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            </ul>
        </div>

        <div class="second_address">
			<span>hostPlayer:</span>
			<span></span>
		</div>
        <div class="second area_showhand">
            <ul>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            </ul>
		</div>
    <div style="text-align: center;">
    	wei:<input type="text" class="getWei form-control weiclass" >
    	<button type="button" class="BringIn btn btn-danger">下底注</button>
		<button type="button" class="Bet btn btn-primary">下注</button>
		<button type="button" class="ActivePlayer btn btn-primary">该谁说话</button>
		<button type="button" class="getWinner btn btn-primary">查看赢家</button>
	</div>
	<div style="text-align: center; margin:10px 0 10px 0">下面4个按钮是作业部分</div>
	<div style="text-align: center;">
		<button type="button" class="pass btn btn-primary">过牌</button>
		<button type="button" class="fold btn btn-danger">弃牌</button>
		<button type="button" class="getBalance btn btn-primary">本轮押注金额</button>
		<button type="button" class="getActivePlayer btn btn-primary">当前说话玩家</button>
	</div>

</div>

</body>
</html>
